<template>
  <button
    class="x-option"
    :class="{ checked }"
  >
    <span class="truncate flex-1 block text-left">{{ label }}</span>
    <icon-font
      name="check"
      :color="equ === 'pc' ? '#ffffff' : '#4673EE'"
      class="check w-14px "
    />
  </button>
</template>

<script
  lang="ts"
  setup
  name="XOption"
>
import { equ } from '../../../../package-env'

// eslint-disable-next-line vue/require-prop-types
defineProps(['checked', 'label'])
</script>

<style
  scoped
  lang="scss"
>
.x-option {
  @apply flex items-center justify-around relative w-full;
  padding: 6.5px 15px;
  font-size: $form-font-size;
  line-height: 17px;
  color: rgba(255, 255, 255, 1);
  box-sizing: border-box;

  .check {
    opacity: 0;
  }

  &.checked {
    color: $select-check-color;

    .check {
      opacity: 1;
    }
  }

  &:hover {

    background: rgba(0, 0, 0, 0.1);
  }
}
</style>
